<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="page_top">
      <div class="left_btn" @click="back">
        <img src="../../assets/image/back.png" alt=""/>
      </div>
      <crumbs basetitle="客户" title="客户管理"></crumbs>
    </div>
    <div class="content">
      <el-card>
        <div class="screen">
          <span class="bord">筛选</span>
          <div class="utilsbox">
            <div class="deleate" @click="clear">
              <img style="margin-top: -1px" src="../../assets/image/容器.png" alt=""/>
              <span class="clear">清除</span>
            </div>
          </div>
        </div>
        <div class="screen_condition">
          <div class="formbox">
            <div class="flex items-center">
              <span class="flex-no-shrink">姓名：</span>
              <el-input class="w-full flex-1" v-model="name" clearable placeholder="请输入姓名"
                        @input="changename"></el-input>
            </div>
            <div class="flex items-center">
              <span class="flex-no-shrink">身份证号：</span>
              <el-input class="w-full flex-1" v-model="idcard" clearable placeholder="请输入身份证号"
                        @input="changeidcard"></el-input>
            </div>
            <div></div>
            <div class="flexendbox">
              <el-button type="primary" icon="Plus" @click="add">新增</el-button>
            </div>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 16px">
        <div class="table-list">
          <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536',
                    }">
            <!-- <el-table-column type="selection" width="40" /> -->
            <el-table-column prop="idCard" label="身份证号" align="center"/>
            <el-table-column prop="name" label="姓名" align="center"/>
            <el-table-column prop="sex" label="性别" align="center"/>
            <el-table-column prop="address" label="地址" align="center"/>
            <el-table-column prop="birthday" label="出生日期" align="center">
              <template #default="scope">
                <div>
                  {{ dayjs(scope.row.birthday).format('YYYY-MM-DD') }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <div class="flexcenterbox">
                  <div @click="edit(scope.row)" class="blue pointer">
                    修改
                  </div>
                  <div @click="delwhite(scope.row)" style="margin-left: 10px" class="blue pointer">
                    删除
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
                      @SizeChange="handleSizeChange" @CurrentChange="handleCurrentChange"></pagination>
        </div>
      </el-card>
    </div>
    <el-dialog v-model="dialogFormVisible" :title="title" width="500">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
               status-icon>
        <el-form-item label="姓名" prop="addname">
          <el-input v-model="ruleForm.addname"/>
        </el-form-item>
        <el-form-item label="身份证号" prop="addid">
          <el-input v-model="ruleForm.addid" :disabled="flag"/>
        </el-form-item>
      </el-form>
      <div class="flexendbox">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {Plus, EditPen} from '@element-plus/icons-vue'
import {onActivated, onMounted, reactive, ref} from 'vue'
import crumbs from '../../components/crumbs.vue'
import {getlibrarylistapi, addlibrarylistapi, editlibrarylistapi, dellibraryapi} from '../../api/whitelist'
import dayjs from 'dayjs'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from 'element-plus'
import {shake} from '../../utils/utils'
import {SocketAddress} from 'net'

const ruleFormRef = ref<FormInstance>()
const dialogFormVisible = ref(false)
const title = ref('添加身份信息库')
const flag = ref(false)
const add = () => {
  ruleForm.addname = ''
  ruleForm.addid = ''
  dialogFormVisible.value = true
  title.value = '添加身份信息库'
  flag.value = false
}
const delwhite = (val: any) => {
  dellibraryapi({
    idCard: val.idCard
  }).then((res: any) => {
    if (res.code === 200) {
      getlibrarylist()
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
    }
  })
}
const edit = (val: any) => {
  flag.value = true
  dialogFormVisible.value = true
  title.value = '修改身份信息库'
  ruleForm.addname = val.name
  ruleForm.addid = val.idCard
  sex.value = val.sex
  address.value = val.address
  birthday.value = val.birthday
}
const sex = ref('')
const address = ref('')
const birthday = ref('')
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      if (title.value === '添加身份信息库') {
        addlibrarylistapi({
          idCard: ruleForm.addid,
          name: ruleForm.addname,
        }).then((res: any) => {
          console.log(res, '添加')
          if (res.code === 200) {
            ElMessage({
              message: '添加成功',
              type: 'success',
            })
            resetForm(ruleFormRef.value)
          }
        })
      } else {
        editlibrarylistapi({
          name: ruleForm.addname,
          idCard: ruleForm.addid,
          sex: sex.value,
          address: address.value,
          birthday: birthday.value
        }).then((res: any) => {
          console.log(res, '修改')
          if (res.code === 200) {
            ElMessage({
              message: '修改成功',
              type: 'success',
            })
            name.value = ''
            idcard.value = ''
            getlibrarylist()
            resetForm(ruleFormRef.value)
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value = false
}
const ruleForm = reactive<any>({
  addname: '',
  addid: '',
})
const rules = reactive<any>({
  addname: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
  ],
  addid: [
    {required: true, message: '请输入身份证号', trigger: 'blur'},
    {
      pattern: /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
      trigger: 'blur',
      message: '请输入正确的身份证号'
    }
  ],
})
const clear = () => {
  name.value = ''
  idcard.value = ''
  tableData.value = []
}
onMounted(() => {
  getlibrarylist()
})
onActivated(() => {
  getlibrarylist()
})
const getlibrarylist = () => {
  getlibrarylistapi({
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    name: name.value,
    idCard: idcard.value,
  }).then((res: any) => {
    console.log(res, 'whitelist')
    tableData.value = res.rows
    total.value = res.total
  })
}
const multipleTableRef = ref()
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
// 清空选中方法
// multipleTableRef.value!.clearSelection()
const multipleSelection = ref<any>([])
const tableData = ref<any>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val: any) => {
  pageSize.value = val
  currentPage.value = 1
  getlibrarylist()
}
const handleCurrentChange = (val: any) => {
  currentPage.value = val
  getlibrarylist()
}
const name = ref('')
const idcard = ref('')
const changeidcard = () => {
  shake(getlibrarylist, 500)
}
const changename = () => {
  shake(getlibrarylist, 500)
}
const back = () => {
  window.history.back()
}
</script>

<style lang="scss" scoped>
.screen_condition {
  box-sizing: border-box;
  padding: 0 20px;
  margin-top: 16px;

  .formbox {
    margin-top: 16px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

.content {
  max-height: 800px;
  overflow: auto;
  box-sizing: border-box;
  margin: 16px;
}

.screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-bottom: 2px solid #f4f4f7;

  .deleate {
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .bord {
    font-weight: 700;
  }

  img {
    margin-right: 10px;
    margin-top: 5px;
  }

  .clear {
    color: rgba(148, 151, 177, 1);
    font-size: 14px;
  }
}

.blue {
  color: #3e5ff5;
}
</style>
